﻿@using Utils;
@model WebUI.Models.IndShotViewModel
@{
    ViewBag.Title = Model.Shot.Title + " by " + Model.Ind.FullName + " - JuicyBasket";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="single-title">
    <div class="fl">
        <a href="/user/@Model.Login.UserName" title="@Model.Ind.FullName">
            <img class="avatar48" src="@Url.StaticFile(Model.AvatarUrl)" alt="@Model.Ind.FullName">
        </a>
    </div>
    <div class="fl">
        <h1>
            <span>@Model.Shot.Title</span>
        </h1>
        <div class="clear"></div>
        <div class="byline">
            By <a href="/user/@Model.Login.UserName" rel="contact" title="@Model.Ind.FullName">@Model.Ind.FullName</a> @Model.Shot.CreateDate.ToDateTimeString()
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="theshot">
    <div class="single">
        <div class="singleimage">
            <img id="theshot" src="@Model.ShotUrl" alt="@Model.Shot.Title"/>
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="comments-section">
    <div class="clear"></div>
    <div class="sharetool">
        <!-- AddThis Button BEGIN -->
        <div class="addthis_toolbox addthis_default_style ">
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
        <a class="addthis_button_tweet"></a>
        <a class="addthis_button_pinterest_pinit"></a>
        <a class="addthis_counter addthis_pill_style"></a>
        </div>
        <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50739e8a7bc6bbde"></script>
        <!-- AddThis Button END -->
    </div>
    <div class="clear"></div>
    @if (!string.IsNullOrEmpty(Model.Shot.Description))
    {
    <div class="tabsbottom"></div>
    <div class="comment-item">
        <div class="fl commentside">
            <a href="/user/@Model.Login.UserName">
                <img src="@Url.StaticFile(Model.AvatarUrl32)" alt="@Model.Ind.FullName" class="avatar32"/>
            </a>
        </div>
        <div class="fl comment">
            <div><a href="/user/@Model.Login.UserName" rel="contact" title="@Model.Ind.FullName">@Model.Ind.FullName</a></div>
            <p>@Model.Shot.Description</p>
        </div>
        
    </div>
    }
    else
    {
        <span>&nbsp;</span>
    }
</div>
<div class="single-side">
    <div style="width:100%;margin-top:15px;"></div>
    <div>
        <div class="fl"><img src="/content/images/icon-orgshot-lg.png"/></div>
        <div class="fl" style="margin-left:10px;height:30px;line-height:30px;">
            <a href="/shots/@Model.Shot.ShotID/original">
                See Original Shot
            </a>
        </div>
    </div>
    
    @*<div class="spacer"></div>
    <div class="clear"></div>
    <ul class="tabs">
        <li>
            <h3>Tags</h3>
        </li>
    </ul>
    <div class="tabsbottom"></div>
    @if (Model.ShotTagList.Count > 0)
    {
    <ol class="tags">
        @foreach (var tag in Model.ShotTagList)
        {
            <li><a href="@Url.Action("tags", new { UserName = Model.Login.UserName, Tag = tag.Name })">@tag.Name</a></li>
        }
    </ol>
    }
    else
    { 
        <div class="null-message-small"><h2>None</h2></div>
    }*@
    <div class="clear"></div>

    @if (Model.PrevShot != null || Model.NextShot != null)
    {    
    <div class="spacer"></div>
    <ul class="tabs">
        <li>
            <h3>More by <a href="/user/@Model.Login.UserName" rel="contact" title="@Model.Ind.FullName">@Model.Ind.FullName</a></h3>
        </li>
    </ul>
    <div class="tabsbottom"></div>
    <ol class="prevnext">
        @if (Model.PrevShot != null)
        {
            <li class="prev">
                <a href="/shots/@Model.PrevShot.ShotID" title="@Model.PrevShot.Title">
                    <strong>Newer</strong>
                    <img src="@Model.PrevShot["ShotUrl"]" alt="@Model.PrevShot.Title"/>
                </a>
            </li>
        }
        else
        { 
            <li class="prev none">
                <span>
                    You’re viewing the latest shot
                </span>
            </li>
        }
        
        @if (Model.NextShot != null)
        {
            <li class="next">
                <a href="/shots/@Model.NextShot.ShotID" title="@Model.NextShot.Title">
                    <strong>Older</strong>
                    <img src="@Model.NextShot["ShotUrl"]" alt="@Model.NextShot.Title"/>
                </a>
            </li>
        }
        else
        { 
            <li class="next none">
                <span>
                    You’re viewing the oldest shot
                </span>
            </li>
        }
    </ol>
    <div class="clear"></div>
    }
    
    <div class="spacer"></div>
    <div class="clear"></div>
    <ul class="tabs">
        <li>
            <h3>Tags</h3>
        </li>
    </ul>
    <div class="tabsbottom"></div>
    @if (Model.ShotTagList.Count > 0)
    {
    <ol class="tags">
        @foreach (var tag in Model.ShotTagList)
        {
            <li><a href="@Url.Action("tags", new { UserName = Model.Login.UserName, Tag = tag.Name })">@tag.Name</a></li>
        }
    </ol>
    }
    else
    { 
        <div class="null-message-small"><h2>None</h2></div>
    }
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="spacer"></div>
<div class="keyboarddes">
    <p>
        keyboard shortcuts: 
        <span><strong>←</strong> previous shot</span> 
        <span> next shot <strong>→</strong></span> 
    </p>
</div>
<div class="clear"></div>

@section FooterContent
{
    <script type="text/javascript">
        $(function () {
            // Keyboard shortcut
            $(document).keyup(Screenshot.Keyboard.handle);

            $("#theshot").click(function () {
                if ($("#lightbox").length > 0) {
                    $("#lightbox").remove();
                }
                else {
                    var html = '<div id="lightbox" style="overflow: auto; "></div>';
                    $("body").append(html);
                }
            })
        })

        var Screenshot = {
            Keyboard: {
                // Key Constants
                b_key: 66,
                f_key: 70,
                l_key: 76,
                esc: 27,
                left_arrow: 37,
                right_arrow: 39,

                handle: function (e) {
                    if (Screenshot.Keyboard.is_valid_event(e)) {
                        var code = e.which;

                        switch (code) {
                            case Screenshot.Keyboard.left_arrow:
                                Screenshot.Page.prev();
                                break;
                            case Screenshot.Keyboard.right_arrow:
                                Screenshot.Page.next();
                                break;
                        }
                    }
                },
                is_valid_event: function (e) {
                    // Check if the target is the main page. This prevents an
                    // event from firing when a person is typing a comment,
                    // or in the search bar.
                    if (e.target.localName == 'body' || e.target.localName == 'html')
                        if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey)
                            return true;

                    return false;
                }
            },
            Page: {
                next: function () {
                    var href = $('.prevnext:first .next a').attr('href');
                    if (href) {
                        document.location = href;
                    }
                },
                prev: function () {
                    var href = $('.prevnext:first .prev a').attr('href');
                    if (href) {
                        document.location = href;
                    }
                }
            }
        }
        
    </script>
}